<template>
	<view class="msgLayout">
		<view class="msg-count">
			<navigator url="/pages/notice/notice">
				<view class="item">
					<view class="icon">
						<uni-icons type="notification"></uni-icons>
					</view>
					<text>系统通知</text>
					<text class="badge-count" v-if="msgCount.msgCount > 0">{{msgCount.msgCount}}</text>
				</view>
			</navigator>
			<view class="item">
				<view class="icon">
					<uni-icons type="auth"></uni-icons>
				</view>
				<text>好友申请</text>
				<text class="badge-count" v-if="msgCount.friendCount > 0">{{msgCount.friendCount}}</text>
			</view>
		</view>
		<cardTitleVue>
			<template #title>
				我的好友
			</template>
		</cardTitleVue>
		<view class="friend-list">
			<friendItemVue v-for="item in list" :item="item" :key="item.id"></friendItemVue>
			<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import {
		useUserStore
	} from '@/store/user';
	import cardTitleVue from '@/components/card-title/card-title.vue';
	import friendItemVue from '@/components/friend-item/friend-item.vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		apiGetFriendList,
		apiMsgCount
	} from '@/api/apis';
	import {
		ref
	} from 'vue';
	let list = ref([])
	let page = ref(1)
	let hasMore = ref(true)
	let isLoading = ref(false)
	let msgCount = ref([])

	const getFriendList = async () => {
		await apiMsgCount().then(res => {
			msgCount.value = res.data
		})
	}
	const getCount = async () => {
		await apiGetFriendList().then(res => {
			list.value = res.data.data
		})
	}
	onReachBottom(async () => {
		if (isLoading.value || !hasMore.value) return
		isLoading.value = true
		page.value = page.value + 1
		await  apiGetFriendList({
			page: page.value
		}).then(res => {
			if (res.data.data.length > 0) {
				isLoading.value = false
				list.value = [...list.value, ...res.data.data]
				if (!res.data.has_more) hasMore.value = false
			} else {
				hasMore.value = false
				isLoading.value = false
			}
		})
	
	})
	getFriendList()
	getCount()
</script>

<style lang="scss" scoped>
	.msgLayout {
		padding: 20rpx;

		.msg-count {
			display: flex;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin: 0 25rpx;
				position: relative;

				text {
					font-size: 26rpx;

				}

				.icon {
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #f3f4f5;
					margin-bottom: 20rpx;

					uni-icons {
						font-size: 20rpx;
						color: $theme-color;
					}
				}


			}
		}

		.badge-count {
			position: absolute;
			top: -10rpx;
			right: -20rpx;
			font-size: 5rpx;
			background-color: #dd524d;
			border-radius: 50%;
			color: #f3f4f5;
			padding: 3rpx 10rpx;
		}

	}
</style>